<template>
  <!-- 更新提示弹窗（使用 Vant 的 Dialog） -->
  <van-dialog
    v-model:show="showDialog"
    title="系统更新"
    show-cancel-button
    confirm-button-text="立即刷新"
    cancel-button-text="稍后再说"
    @confirm="handleRefresh"
  >
    <p style="padding: 16px">检测到新版本，建议刷新页面以获取最新内容。</p>
  </van-dialog>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { createVersionPolling } from 'version-polling';

const showDialog = ref(false);
let poller = null;

const handleRefresh = () => {
  window.location.reload();
};

onMounted(() => {
  // 初始化 version-polling
  poller = createVersionPolling({
    pollingInterval: 5 * 60 * 1000, // 5分钟检测一次
    silent: import.meta.env.DEV, // 开发环境不检测
    onUpdate: () => {
      showDialog.value = true; // 触发弹窗
    },
  });
});

onBeforeUnmount(() => {
  if (poller) poller.destroy(); // 组件卸载时清理
});
</script>